<template>
    <div class="hello" id="hell">
     <p>111111111111111111111111111111111</p>
     <button @click="f1">111111</button>
     <button @click="fn">111111222222</button>
     <button @click="shuffle">1111wuwu22</button> 
     <div id="list-demo" class="demo">
        <button v-on:click="add">Add</button>
        <button v-on:click="remove">Remove</button>
        <transition-group name="list" tag="p">
          <span v-for="item in items" v-bind:key="item" class="list-item">
            {{ item }}
          </span>
        </transition-group>
      </div>
    <button @click="divCan">1231</button>
    <canvas id="tutorial" width="300" height="300">
            current stock price: $3.15 +0.15
    </canvas>
    </div>
  </template>
  <script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        dataUrl:'',
        items: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30],
        nextNum: 31,
      }
    },
    methods:{
        divCan(){
            var canvas = document.getElementById('tutorial');
            if(canvas.getContext){
                var ctx = canvas.getContext('2d');
                //颜色 fillStyle //fillRect(x, y, width, height) 坐标
                // ctx.fillStyle = "rgb(200,0,0)";
                // ctx.fillRect (10, 10, 55, 50);

                // ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
                // ctx.fillRect (30, 30, 55, 50);

                // ctx.fillStyle = 'rgba(200,150,0)'
                // ctx.fillRect (100, 100, 50, 50); //绘制填充
                // ctx.strokeRect(110,110,30,30)   //绘制边框
                // ctx.clearRect(115,115,15,15)    //清楚矩形区域

                // ctx.beginPath()//生成路径
                // ctx.moveTo(50,25);
                // ctx.lineTo(30,45);
                // ctx.lineTo(100,75);
                // ctx.lineTo(100,25);
                // ctx.lineTo(50,25)
                // ctx.stroke();
                
                ctx.beginPath();
                ctx.arc(75,75,50,0,Math.PI*2,true); // 绘制
                ctx.moveTo(110,75);
                ctx.arc(75,75,35,0,Math.PI,false);   // 口(顺时针)
                ctx.moveTo(65,65);
                ctx.arc(60,65,5,0,Math.PI*2,true);  // 左眼
                ctx.moveTo(95,65);
                ctx.arc(90,65,5,0,Math.PI*2,true);  // 右眼
                ctx.stroke();

                ctx.beginPath();
                ctx.arc(200,200,80,0,Math.PI*2,true); // 绘制
                
                ctx.stroke();
            }
        },
        randomIndex(){
            return Math.floor(Math.random() * this.items.length)
        },
        add(){
            this.items.splice(this.items.length, 0, this.nextNum++)
        },
        remove(){
            this.items.splice(this.items.length-1, 1)
        },
        shuffle() {
            this.items = _.shuffle(this.items)
        },
         takeLongTime(n) {
            return new Promise(resolve => {
                setTimeout(() => resolve(n), n);
            });
        },
        step1(n) {
            let num = Math.random()*10000
            console.log(`step1 with ${n+num}`);
            return this.takeLongTime(n+num);
        },
        step2(n) {
            let num = Math.random()*10000
            console.log(`step2 with ${n+num}`);
            return this.takeLongTime(n+num);
        },
        step3(n) {
            let num = Math.random()*10000
            console.log(`step3 with ${n+num}`);
            return this.takeLongTime(n+num);
        },   
        async fn(){
            console.time('doIt');
            let a = 900
            let b = await this.step1(a);
            let c = await this.step2(a);
            let f = await this.step3(a);
            console.timeEnd("doIt");
        },
        async f1(){
            console.time('dat')
            let data = 1
            try{
                await new Promise((resolve,rj)=>{
                    setTimeout(()=>{
                        resolve(data++)
                    },1000)
                })
            }catch(err){
               console.log(err) 
            }
            console.log('111',data)
            console.timeEnd('dat')
        }
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
  canvas { border: 1px solid black; }
  h1, h2 {
    font-weight: normal;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
  .demo{
    margin-left: 400px;
    width: 400px;
  }
  .list-item {
    transition: all 1s;
    display: inline-block;
    margin-right: 10px;
    padding: 5px;
    border:1px solid #ccc;
}
/* 过程中 从无到有 从有到无*/
.list-enter-active, .list-leave-active {
  transition: all 1s;
  position: absolute;
}
/* 开始 和 结束  */
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}
  </style>
  